<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="query.keywords" @custom="search" @search="search"  height="80" placeholder="请输入谈话主题/内容"></u-search>
			<u-dropdown :close-on-click-mask="dropdown.mask" ref="uDropdown" :activeColor="dropdown.activeColor" :borderBottom="dropdown.borderBottom">
				<u-dropdown-item @change="talkTypeChange" v-model="query.talkType" :title="dropdown.talkTypeTitle" :options="dropdown.talkTypeOption"></u-dropdown-item>
				<u-dropdown-item @change="talkSubjectChange" v-model="query.talkSubject" :title="dropdown.talkSubjectTitle" :options="dropdown.talkSubjectOption"></u-dropdown-item>
				<u-dropdown-item @change="talkAddressTypeChange" v-model="query.talkAddressType" :title="dropdown.talkAddressTypeTitle" :options="dropdown.talkAddressTypeOption"></u-dropdown-item>
			</u-dropdown>
		</view>
		<scroll-view class="scroll-list" scroll-y="true"  style="width: 100%; height: 87%; margin-top: 5rpx;margin-bottom: 5rpx;" @scrolltolower="loadMore">
			<view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;margin-bottom: 5rpx;" >
				<u-row gutter="16" style="margin-top: 20rpx;">
					<u-col span="9" style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:bold">
						{{item.talkSubjectName}}
					</u-col>
					<u-col span="3" style="text-align: right;">
						<view style="text-align: right;color: gray;margin-right: 10rpx;">
							{{item.talkTypeName}}
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" style="margin-top: 20rpx;">
					<u-col span="12" style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:gray">
						{{item.talkContent}}
					</u-col>
				</u-row>
				<u-row gutter="16" style="margin-top: 20rpx;margin-bottom: 10rpx;">
					<u-col span="3" >
						<view style="text-align: left;color: gray;">
							{{item.rateUserName}}
						</view>
					</u-col>
					<u-col span="6">
						<u-rate :count="5" :min-count="1" v-model="item.rateScore" active-color='#ff9900' :disabled="true"></u-rate>
					</u-col>
					<u-col span="3">
						<view style="white-space: nowrap;overflow: hidden;">
							<text style="color: gray; text-align: right;" v-if="item.rateContent" @click="handleRateContent(item)">更多评价></text>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" style="margin-top: 20rpx;margin-bottom: 10rpx;">
					<u-col span="3" >
						<view style="text-align: left;color: gray;">
							{{item.feedbackUserName}}
						</view>
					</u-col>
					<u-col span="6">
						<view style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
							{{item.feedback | feedbackFilter}}
						</view>
					</u-col>
					<u-col span="3">
						<view style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
							<text style="color: gray; text-align: right;" 
							 @click="handleFeedbackContent(item)"
							v-if="item.feedback && item.feedback.length>18">更多反馈></text>
						</view>
					</u-col>
				</u-row>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
		</scroll-view>
		<u-modal v-model="rateContentModel.show" :content="rateContentModel.content"></u-modal>
		<u-modal v-model="feedbackModel.show" :content="feedbackModel.content"></u-modal>
	</view>
</template>
<script>
	import $time from '@/common/time.js';
	export default {
		data() {
			return {
				query: {
					current: 1,
					size: 10,
					keywords: '',
					talkBeginDate:'',
					talkBeginDate:'',
					talkType: '',
					talkSubject:'',
					talkAddressType:'',
					createUser:''
				},
				rateContentModel:{
					show:false,
					content:'',
					title:''
				},
				feedbackModel:{
					show:false,
					content:'',
					title:''
				},
				list: [],
				pages: 0,
				loadStatus: 'loadmore',
				options: [],
				headStyle: {
					fontWeight: 'bold',
					color: '#606266',
					margin: '16rpx'
				},
				statusList: [],
				swiperCurrent:0,
				dropdown:{
					borderBottom: false,
					activeColor: '#2979ff',
					mask: true,
					talkTypeOption:[],
					talkTypeTitle:'谈话方式',
					talkSubjectOption:[],
					talkSubjectTitle:'谈话类型',
					talkAddressTypeOption:[],
					talkAddressTypeTitle:'谈话地点',
				},
			};
		},
		onLoad(params) {
			if(params.createUser){
				this.query.createUser=params.createUser;
			}
			this.loadList();
			this.initTalkAddressType();
			this.initTalkSubject();
			this.initTalkType();
		},
		computed:{
			
		},
		filters: {
		    rateContentFilter (value) {
		        if (!value) return ''
		        if (value.length > 8) {
		            return value.slice(0, 8) + '...'
		        }
		        return value
		    },
			feedbackFilter (value) {
			    if (!value) return ''
			    if (value.length > 18) {
			        return value.slice(0, 18) + '...'
			    }
			    return value
			}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			search(value) {
				this.list = [];
				this.query.current = 0;
				this.loadList();
			},
			loadList() {
				this.$u.api.mis.misAssistantTalk.rateList(this.query).then(res => {
					if (!res.data.records || res.data.records.length == 0) {
						this.loadStatus = "nomore";
						return;
					}
					res.data.records.forEach((item) => {
						item.show=false;
					})
					this.list = this.list.concat(res.data.records);
					this.pages = res.pages;
					this.query.current = res.data.current;
					this.query.size = res.data.size;
					this.loadStatus = "loadmore";
				});
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.current += 1;
					this.loadList();
				}, 100);
			},
			handleClick(row){
				this.navTo('form?id='+row.id);
			},
			initTalkType() {
				this.$u.api.dictBizData({
					code: 'mis_talk_type'
				}).then(res => {
					let detaiList = [];
					let detailJson = {
						'label': '全部',
						'value': ''
					}
					detaiList.push(detailJson)
					res.data.forEach((item) => {
						detaiList.push({
							'label': item.dictValue,
							'value': item.dictKey
						});
					})
					this.dropdown.talkTypeOption = detaiList;
				});
			},
			initTalkAddressType() {
				this.$u.api.dictBizData({
					code: 'mis_talk_address'
				}).then(res => {
					let detaiList = [];
					let detailJson = {
						'label': '全部',
						'value': ''
					}
					detaiList.push(detailJson)
					res.data.forEach((item) => {
						detaiList.push({
							'label': item.dictValue,
							'value': item.dictKey
						});
					})
					this.dropdown.talkAddressTypeOption = detaiList;
				});
			},
			initTalkSubject() {
				this.$u.api.dictBizData({
					code: 'mis_talk_subject'
				}).then(res => {
					let detaiList = [];
					let detailJson = {
						'label': '全部',
						'value': ''
					}
					detaiList.push(detailJson)
					res.data.forEach((item) => {
						detaiList.push({
							'label': item.dictValue,
							'value': item.dictKey
						});
					})
					this.dropdown.talkSubjectOption = detaiList;
				});
			},
			talkTypeChange(index) {
				this.list = [];
				this.query.current = 0;
				this.query.talkType=index
				this.dropdown.talkTypeTitle=(index===''?'谈话方式':this.getOptionLabel(this.dropdown.talkTypeOption,index));
				this.loadList()
			},
			talkAddressTypeChange(index) {
				this.list = [];
				this.query.current = 0;
				this.query.talkAddressType=index
				this.dropdown.talkAddressTypeTitle=(index===''?'谈话地点':this.getOptionLabel(this.dropdown.talkAddressTypeOption,index));
				this.loadList()
			},
			talkSubjectChange(index) {
				this.list = [];
				this.query.current = 0;
				this.query.talkSubject=index
				this.dropdown.talkSubjectTitle=(index===''?'谈话类型':this.getOptionLabel(this.dropdown.talkSubjectOption,index));
				this.loadList()
			},
			handleRateContent(row){
				this.rateContentModel.content=row.rateContent;
				this.rateContentModel.show=true;
			},
			handleFeedbackContent(row){
				this.feedbackModel.content=row.feedback;
				this.feedbackModel.show=true;
			}
		}
	};

</script>
<style lang="scss">
@import '../../../../common/uni.css';
page {
	background-color: #f5f5f5;
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
	margin-left: 15rpx;
	margin-right: 15rpx;
}
.search{
	height:90px;
	background-color: #ffffff;
	// background-image: url(/static/aidex/school_bg.jpg);
	background-size: 450px;
}
.uni-title{
	font-size: 30rpx;
	color: #333333;
	padding: 10px;
	background: #fff;
	border-top:1px solid #ededed;
	margin-top: 20rpx;
}
.uni-media-list {
    padding: 15px 15px;

}
.uni-media-list-body {
    height: 60px;
	padding-left:20rpx;
	border-left:thick double #D5D5D5;
	border-width: 1px;
}
.uni-media-list-text-top{
	width: 100%;
	line-height: 35rpx;
	font-size: 28rpx;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-text-content {
    width: 100%;
    line-height: 35rpx;
    font-size: 22rpx;
	color: darkgray;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-text-bottom {
    width: 100%;
    line-height: 24rpx;
    font-size: 26rpx;
	color: #666666;
	text-align: right;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-right {
    height: 60px;
	padding-left:20rpx;
	transform: translateY(40%) translateX(50%)
}
.btn-plus {
		position: absolute;
		bottom: 50rpx;
		right: 50rpx;
		z-index: 1;
		opacity: 0.6;
	}

.btn-plus:hover {
	opacity: 1;
}


</style>